<template>
  <div>
    <i class="el-icon-bell" @click="goto"></i>

    <el-dialog title="消息通知" :visible.sync="open">
      <el-form :inline="true" size="small" label-width="90px">
        <el-form-item label="通知类型">
          <el-select v-model="noticeType" placeholder="请选择通知类型">
            <el-option
              v-for="dict in dict.type.wms_notice_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="submitForm" :loading="btnLoading">设置</el-button>
        </el-form-item>
      </el-form>
      <el-card class="box-card" v-if="noticeList.length > 0">
        <div v-for="(notice, index) in noticeList" :key="index" class="text item">
          通知内容：{{notice.msg}}
          时间：{{notice.createTime}}
        </div>
      </el-card>
      <div v-else>
        暂无通知
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listNotice,settingUserNotice,getNoticeSetting} from '@/api/wms/notice'
import notice from "@/views/system/notice/index.vue";
export default {
  name: 'Notice',
  computed: {
    notice() {
      return notice
    }
  },
  dicts: ['wms_notice_type'],
  data() {
    return {
      btnLoading: false,
      noticeType: '',
      open: false,
      openSetting: false,
      noticeList: []
    }
  },
  methods: {
    goto() {
      listNotice().then(res => {
        this.noticeList = res.data
      })
      getNoticeSetting().then(res => {
        this.noticeType = res.data.noticeType
      })
      this.open = true
    },
    handleSetting(){
      this.openSetting = true
    },
    cancel(){
      this.openSetting = false
      this.btnLoading = false
    },
    submitForm(){
      settingUserNotice({noticeType: this.noticeType}).then(res => {
        if (res.code == 200) {
          this.$notify.success("设置成功")
          this.openSetting = false
        } else {
          this.$notify.error(res.msg)
        }
      }).finally(e => {
        this.btnLoading = false
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-form-item--small .el-form-item__label{
  margin-top: -20px;
}
</style>
